<template>
  <div class="SelectSqlConfig">
    <a-input-search v-model="filterText" :allowClear="true" enter-button placeholder="请输入查询条件" @search="onSearch"/>
    <div class="table">
      <a-table
        bordered
        :data-source="tableData"
        :pagination="pagination"
        :columns="columns"
        :custom-row="customRow"
        :rowClassName="setRowClassName"
      >
        <template slot="xh" slot-scope="text, record, index">
          {{index + 1}}
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
  import { getColumns } from '@/api/tableColumns'
  import sqlService from '@/api/sqlService'
export default {
  name: 'SelectSqlConfig',
  data () {
    return {
      filterText: '',
      tableData: [],
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100', '200', '500'],
        showTotal: (total) => `共${total}条数据`,
        onShowSizeChange: (current, pageSize) => {
          this.pagination.pageSize = pageSize
          this.onSearch()
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current
          this.pagination.pageSize = pageSize
          this.onSearch()
        }
      },
      columns: getColumns('selectSqlConfig'),
      activeIndex: -1
    }
  },
  created () {
    this.onSearch()
  },
  methods: {
    customRow (record, index) {
      return {
        on: {
          click: () => {
            this.activeIndex = index
          }
        }
      }
    },
    setRowClassName (record, index) {
      let className = ''
      if (this.activeIndex === index) {
        className = 'active'
      }
      return className
    },
    async onSearch () {
      const sqlParam = {
        filterText: this.filterText,
        pageIndex: this.pagination.current,
        pageSize: this.pagination.pageSize
      }
      const d = await sqlService.listAllSqlConfig(sqlParam)
      this.tableData = d.rows
      this.pagination.total = d.total
    }
  }
}
</script>

<style lang="less" scoped>
.SelectSqlConfig{
  height: 550px;
  .table{
    padding: 10px 0;
    /deep/.active{
      td {
        background-color: rgb(230,247,255) !important;
      }
      background-color: rgb(230,247,255);
    }
  }
}
</style>
